<template>
  <div class="secondNavIndex h100">
    <div
      class="nav__left h100"
      v-show="showNav"
      v-if="secondNavConfig.navList.length"
    >
      <secondNavN v-bind="secondNavConfig"></secondNavN>
    </div>
    <div
      class="main-content h100"
      :class="{
        navPackUp: !showNav,
        noSecondNav: !secondNavConfig.navList.length
      }"
    >
      <!-- 面包屑 -->
      <!-- <div class="crumbs" v-if="routerList.length > 1">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            v-for="item in routerList"
            :key="item.path"
            :to="item.path"
            >{{ item.title }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div> -->
      <div class="secondSolt">
        <slot></slot>
	    </div>
    </div>
    <div
      class="folding-tree"
      @click="toShowTree"
      :class="{ iconPackUp: !showNav }"
      v-if="secondNavConfig.navList.length"
    >
      <i class="el-icon-arrow-left" v-if="showNav"></i>
      <i class="el-icon-arrow-right" v-else></i>
    </div>
  </div>
</template>

<script>
import secondNavN from "./secondNav";
export default {
  props: ["secondNavConfig"],
  components: { secondNavN },
  data() {
    return {
      showNav: true
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    toShowTree() {
      this.showNav = !this.showNav;
    },
    //面包屑的数据获取
    getBreadcrumb() {
      let matched = this.$route.matched;
      let levelList = [];
      const first = matched[0];
      matched.forEach(i => {
        if (i.meta.title) {
          levelList.push({ title: i.meta.title, path: i.path });
        }
      });
      this.routerList = levelList;
    }
  }
};
</script>

<style lang='less'>
.secondNavIndex {
  position: relative;
}
.nav__left {
  float: left;
  width: 200px;
  background-color: #fff;
  overflow: auto;
  position: relative;
}
.main-content {
  display: flex;
  flex-flow: column nowrap;
  margin-left: 215px;
  height: 100%;
  position: absolute;
  width: calc(100% - 215px);
  /* background-color: #fff;
  overflow-y: auto; */
}
.centerContent {
  height: 100%;
}
.haveCrumb {
  height: calc(100% - 40px);
}
.secondSolt{
   //height:calc(100% - 62px);
   height: 100%;
   //margin-top: 15px;
   background: #fff;
   border-radius: @kr-bg-board-radius;
}
.folding-tree {
  position: absolute;
  line-height: 56px;
  height: 56px;
  width: 12px;
  top: 44%;
  left: 188px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #cccccc;
  background-color: #ffffff33;
}
.folding-tree:hover {
  cursor: pointer;
  background-color: #fafafa;
}
.iconPackUp {
  left: -10px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #ffffff;
}
.navPackUp {
  margin-left: 0px;
  width: calc(100% - 10px);
}
.noSecondNav {
  margin-left: 0px;
  width: 100%;
}
.crumbs {
  height: 48px;
  padding: 16px 19px;
  background: #fff;
  border-radius: @kr-bg-board-radius;
  //border-bottom: 1px solid #f2f6fa;
}
.el-breadcrumb{
  font-size: 14px;
  
}
.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
   font-size: 14px;
   font-weight: 400;
  color: #333333;
}
.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link:hover{
  color: #0D60B4;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
    font-weight: 400;
    color: #999999;
    cursor: text;
}
</style>